Styling Autofilled Input Fields Using CSS
Browsers often apply special styling to input fields that have been autofilled (e.g., by saved passwords or form data). CSS provides vendor-prefixed pseudo-classes to target these autofilled inputs for consistent styling.
Use
:-webkit-autofillto style autofilled inputs in WebKit-based browsers (Chrome, Safari, Edge).Combine with other selectors like
inputortextareato target specific fields.You can adjust background color, text color, font, and even add transitions for smoother visuals.
In this example, when a user’s browser autofills the email or password field, the background changes to a light teal color and text becomes dark teal, providing a clear visual indication that the field has been autofilled.
Always use
!importantfor autofill styles to override browser default styles.Ensure sufficient contrast for text readability on autofilled fields.
Combine with
:focusor:hoverto enhance user interaction.Test across multiple browsers, as autofill styling support varies and may require vendor prefixes.